<template>
	<div>
		<toubu></toubu>
		<navs></navs>
		<div>
			<div class="pao">
				<div class="pao-li" v-for="abc in list">
					<div class="pao-lei">
						<router-link to="/xiang" class="o-img">
							<img :src="abc.picUrl" />
							<span class="a-span">
								<i class="back"></i>
								{{abc.listenCount/10000}}万
							</span>
						</router-link>
						<router-link to="/xiang">
						<div class="pao-right">
							<div class="right-lei">
								<h3 class="hh3">{{abc.topTitle}}</h3>
								<p class="oop">1<span class="spann">{{abc.songList[0].songname}}</span>-{{abc.songList[0].singername}}</p>
								<p class="oop">2<span class="spann">{{abc.songList[1].songname}}</span>-{{abc.songList[1].singername}}</p>
								<p class="oop">3<span class="spann">{{abc.songList[2].songname}}</span>-{{abc.songList[2].singername}}</p>
							</div>
						</div>
						</router-link>
					</div>
				</div>
			</div>
			<p class="quke">
				<a href="#">
					去客户端发现更多好音乐
				</a>
			</p>
		</div>
	</div>
</template>

<script>
	import Toubu from './toubu.vue'
	import Navs from './Navs.vue'
	import $ from 'jquery'
	export default {
		data: function() {
			return {
				list: []
			}
		},
		components: {
			Toubu,
			Navs
		},
		mounted: function() {
			var url = 'http://localhost:3000/list?time=' + new Date().getTime();
			var chat = this;
			$.get(url, function(res) {
				chat.list = res.data.topList
			})
		}
	}
</script>

<style>

</style>